<template>
	<view>
		<view class="u-p-30 bg-white filter-panel-search">
			<view class="u-flex">
				<view class="u-flex-1">
					<u-search v-model="key" placeholder="搜索手机号码" :show-action="false" shape="square" clearabled
						@change="getlistData(true)"></u-search>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<view class="main">
			<u-cell-group>
				<u-cell-item v-for="(item, index) in listData" :key="index" :title="item.name" :value="item.mobile"
					@click="radioCheckboxChange(item)">
					<!-- <u-checkbox slot="icon" v-model="item.checked" :name="item.id" @change="radioCheckboxChange"></u-checkbox> -->
					<view slot="icon" class="checkBox u-m-r-20" :class="item.checked?'check':''">
						<u-icon v-if="item.checked" name="checkbox-mark" size="24" class="link"
							color="#10beca"></u-icon>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view class="u-p-30">
				<u-loadmore :status="loadStatus" />
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-box">
			<view class="fixed-container">
				<view class="btn-group u-m-t-30">
					<view class="u-flex">
						<view><text class="u-color-main" @click="cancel">返回</text></view>
						<view class="u-flex u-flex-1">
							<view class="u-flex-1">

							</view>
							<u-button type="primary" size="medium" @click="confirm">确定</u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="fixed-placeholder"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				PageIndex: 1,
				PageSize: 20,
				key: '',
				listData: [],
				total: 0, //合计
				ids: [], //选中的id数组
				checkAll: false,
				chooseObj: null, //单选中的对象
				loadStatus: 'loadmore',
			}
		},
		onLoad(opt) {
			console.log('onLoad', this.chooseOrder)
			this.getlistData(true)
		},
		onReachBottom(e) {
			// 此tab为空数据
			this.PageIndex += 1
			if (this.loadStatus == 'loadmore') {
				this.getlistData()
			}
		},
		watch: {
			checkAll(val) {
				if (val) {
					this.listData.forEach((item, i) => {
						this.listData[i].checked = true
					})
				} else {
					this.listData.forEach((item, i) => {
						this.listData[i].checked = false
					})
				}
			}
		},
		methods: {
			radioCheckboxChange(item) {
				let itemId = item.id
				// 取消所有其他项的选中状态
				this.listData.forEach((item, index) => {
					if (item.id !== itemId) {
						// 使用 $set 确保响应式更新
						this.$set(this.listData, index, {
							...item,
							checked: false
						});
					} else {
						// 设置当前项为选中
						this.$set(this.listData, index, {
							...item,
							checked: true
						});
					}
				});

				this.chooseObj = item
			},
			getlistData(isSearch) {
				// 关键词搜索
				if (isSearch) {
					this.PageIndex = 1
					this.listData = []
					this.loadStatus = 'loadmore'
				}
				// 获取待付订单详细列表
				this.loadStatus = 'loading'
				return this.$u.post('/User/List', {
					"PageIndex": this.PageIndex,
					"PageSize": this.PageSize,
					"isAll": true,
					"type": 0,
					"key": this.key
				}).then((res) => {
					if (res.rows.length > 0) {
						res.rows.forEach((item) => {
							item.checked = false
							this.listData.push(item)
						})

						if (res.rows.length < this.PageSize) {
							this.loadStatus = 'nomore'
						} else {
							this.loadStatus = 'loadmore'
						}
					} else {
						this.loadStatus = 'nomore'
					}
				})
			},
			cancel() {
				uni.navigateBack()
			},
			confirm() {
				let chooseObj = this.chooseObj

				let params = {
					"isManager": true,
					mobile: this.chooseObj.mobile
				}
				if (this.chooseObj.userId > 0) {
					params.userId = this.chooseObj.userId
				} else {
					params.name = this.chooseObj.name
				}
				this.$u.post('/Operator/Staff/Entry', params).then((res) => {
					uni.showModal({
						content: '操作成功',
						showCancel: false,
						success: (res)=> {
							if (res.confirm) {
								uni.navigateBack()
							}
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped scoped>
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		font-weight: bold;

		.total-price {
			font-size: 32rpx;
			color: $u-color-orange;
		}
	}

	.bottom-box {
		.fixed-container {
			position: fixed;
			bottom: 0;
			background-color: #fff;
			width: 750rpx;
			padding-top: 0;
			height: 120rpx;
			z-index: 9;
			box-shadow: 0 0 16rpx #e7e7e7;
		}

		.fixed-placeholder {
			height: 120rpx;
			width: 750rpx;
			margin-top: 30rpx;
		}

		.total {
			line-height: 80rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin: 0;
		}

		.btn-group {
			padding-left: 30rpx;
			padding-right: 30rpx;
			padding-bottom: 30rpx;
			padding-top: 0;
		}
	}

	.checkBox {
		width: 30rpx;
		height: 30rpx;
		border: 1px solid $u-border-color;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4rpx;

		&.check {
			border-color: $u-color-blue;
		}
	}
</style>